let ul = document.querySelector('#main ul')

function getUrlParams() {
    let url = location.href;
    let regExp = /.*\?([^\?]+)/
    let query = {}; //最终处理好的参数
    let search = regExp.exec(url);
    //productid=23&NAME=123"
    // console.log(search);
    search = search[1];
    //有没有多个query参数,有的话肯定以&进行连接
    let searchArr = [];
    if (search.indexOf("&")) {
        searchArr = search.split("&")
    } else {
        search = search.split()
    }

    searchArr.forEach(item => {
        let queryArr = item.split("=");
        query[queryArr[0]] = queryArr[1]
    })

    return query
}

let query = getUrlParams();

// console.log(query.categoryid);

let categoryid = query.categoryid.substr(0, 2)
let sel = document.querySelector('#sel');
// console.log(sel);
$.ajax({
    // url: `http://chst.vip:8081/mmb/bijia.html?title=${title}&categoryid=${categoryid}`,
    url: ` http://chst.vip:1234/api/getproductlist?categoryid=${categoryid}&pageid=1`,

}).then(res => {
    console.log(res.result);
    let html = '';
    res.result.forEach(item => {
        html += `
            <li productid=${item.productId}>
            ${item.productImg}
            <div>
            <span>${item.productName}</span><br><span>${item.productPrice}</span><br><span>${item.productQuote}</span><span>|</span>
            <span>${item.productCom}</span>
            </div>`
    })
    ul.innerHTML = html;

    let lis = document.querySelectorAll('li');

    [...lis].forEach(li => {
        li.onclick = function() {
            let productid = this.getAttribute("productid")
                //点击的时候要跳转到详情页
            location.href = "./productlist.html?category=" + categoryid + "&" + "productid=" + productid
        }
    })
})

let option = document.querySelectorAll('#sel option')
let btns = document.querySelectorAll('#main>div>*')
let pageid = 1
Array.from(btns).forEach(btn => {
    btn.onclick = function() {
        // console.log(ul);
        // console.log(this);
        // console.log(this.innerText === '下一页');
        if (this.innerText === '下一页') {

            pageid++;

            function back(pageid) {

                // console.log(categoryid);
                $.ajax({
                    url: 'http://chst.vip:1234/api/getproductlist?categoryid=' + categoryid + '&pageid=' + pageid,

                }).then(res => {
                    // console.log(res.result);
                    let html = '';
                    res.result.forEach(item => {
                        html += `
                        <li productid=${item.productId}>
                        ${item.productImg}
                        <div>
                        <span>${item.productName}</span><br><span>${item.productPrice}</span><br><span>${item.productQuote}</span><span>|</span>
                        <span>${item.productCom}</span>
                        </div>
                                 `
                    })

                    ul.innerHTML = html;
                })
            }
            back(pageid)
        }
        if (this.innerText === '上一页') {

            pageid--;


            function next(pageid) {

                // console.log(categoryid);
                $.ajax({
                    url: 'http://chst.vip:1234/api/getproductlist?categoryid=' + categoryid + '&pageid=' + pageid,

                }).then(res => {
                    // console.log(res.result);
                    let html = '';
                    res.result.forEach(item => {
                        html += `
                        <li productid=${item.productId}>
                        ${item.productImg}
                        <div>
                        <span>${item.productName}</span><br><span>${item.productPrice}</span><br><span>${item.productQuote}</span><span>|</span>
                        <span>${item.productCom}</span>
                        </div>
                                 `
                    })
                    if (pageid <= 0) {

                        this.disabled = false;

                    } else {
                        this.disabled = true;
                    }
                    ul.innerHTML = html;
                })
            }
            next(pageid)


        }

        if (this === btns[1]) {
            // console.log(option[1]);
            for (let i = 0; i < option.length; i++) {
                option[i].onclick = function() {
                    console.log(1);
                }
            }
            // Array.from(option).forEach(opt => {
            //     opt.onclick = function() {
            // console.log(1);
            // $.ajax({
            //     url: 'http://chst.vip:1234/api/getproductlist?categoryid=' + categoryid + '&pageid=' + pageid,

            // }).then(res => {
            //     // console.log(res.result);
            //     let html = '';
            //     res.result.forEach(item => {
            //         html += `
            //         <li productid=${item.productId}>
            //         ${item.productImg}
            //         <div>
            //         <span>${item.productName}</span><br><span>${item.productPrice}</span><br><span>${item.productQuote}</span><span>|</span>
            //         <span>${item.productCom}</span>
            //         </div>
            //                  `
            //     })
            //     ul.innerHTML = html;
            // })
        }
    }
})